<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157" text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
      <el-menu-item :index="item.index" v-for="item in items" :key="item.index">
        <i :class="item.icon"></i>
        <template #title>{{ item.title }}</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { computed, watch } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import CacheApi from '../utils/cache'
export default {
  setup() {
    const items = [
      {
        // icon: "el-icon-lx-home",
        icon: 'el-icon-lx-calendar',
        index: '/dashboard',
        title: '项目统计',
      },
      {
        icon: 'el-icon-s-tools',
        index: '/project_prepared',
        title: '项目报备',
      },
      {
         icon: 'el-icon-user',
         index: '/customer',
         title: '客户管理',
       },
       {
         icon: 'el-icon-user',
         index: '/contract',
         title: '合同管理',
       },
       {
         icon: 'el-icon-user',
         index: '/receivemoney',
         title: '收款管理',
       },
       {
         icon: 'el-icon-user',
         index: '/invoice',
         title: '开票管理',
       },
       {
         icon: 'el-icon-user',
         index: '/product',
         title: '商品管理',
       },
       {
         icon: 'el-icon-user',
         index: '/dictionary',
         title: '数据字典',
         auth: 'admin',
       },
       {
         icon: 'el-icon-user',
         index: '/saler',
         title: '销售人员管理',
         auth: 'admin',
       },
    ]

    const route = useRoute()

    const onRoutes = computed(() => {
      return route.path
    })
    // if (CacheApi.isAdmin !== 'admin') {
    //   let len = items.length
    //   items.splice(len - 2, 2)
    // }
    const store = useStore()
    const collapse = computed(() => store.state.collapse)

    return {
      items,
      onRoutes,
      collapse,
    }
  },
}
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 250px;
}
.sidebar > ul {
  height: 100%;
}
</style>
